
@import '~@/assets/scss/function';
.bill.home-bill-container {
  padding: 200px 0 0;
  .top {
    position: fixed;
    left: 0;
    right: 0;
    top: 90px;
    z-index: 10;
    padding: 26px 30px 0;
    background-color: #F5F5F5;
    .nav-bar {
      display: flex;
      height: 68px;
      align-items: center;
      padding: 0 18px;
      box-sizing: border-box;
      background: #F4E5E5;
      border-radius: 16px;
      .nav-bar-item {
        flex: 1;
        position: relative;
        color: #222;
        font-size: 28px;
        line-height: 1;
        border-right: 1px solid #555;
        text-align: center;
        color: 111;
        z-index: 10;
        &:last-child {
          border: 0;
        }

        &.active {
          border: 0;
          &::after {
            content: '';
            position: absolute;
            left: -1px;
            top: -14px;
            right: 0;
            bottom: -14px;
            z-index: -1;
            background-color: #fff;
            border-radius: 16px;
          }
        }
      }
    }
  }
}

.no-order {
  padding-top: 206px;
  color: #222222;
  font-size: 32px;
  font-weight: normal;
  line-height: 38px;
  text-align: center;
  min-height: 70vh;

  img {
    width: 360px;
    height: 360px;
    margin-bottom: 40px;
  }
}

.order-list {
  min-height: 70vh;
  padding: 40px 33px 0;
  .order-list-item {
    padding: 24px 32px;
    position: relative;
    background: #fff;
    &::after {
      content: '';
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 0;
      height: 1px;
      background-image: url(~@/assets/imgs/dash.png);
      background-size: 100% 100%;
    }
    &.delay {
      .order-list-content {
        .content-middle {
          color: #E02020;
        }
      };
      .delay-time{
        color: #E02020;
      }
    }
    &.finish{
      .name{
        color: #999;
      }
      .order-list-content {
        .content-right{
          display: none;
        }
        .content-middle {
          color: #999;
        }
      };
      
    }
    &.fail{
      .order-list-content {
        .content-right{
          display: none;
        }
      }
    }
    .name {
      color: #222;
      font-size: 32px;
    }
    .order-list-content {
      padding-top: 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      // .content-left {
      //   width: 40px;
      //   height: 40px;
      //   background: #ECF2FF;
      //   border-radius: 4px;
      // }
      .content-middle {
        flex: 1;
        color: #FAD84E;
        font-size: 56px;
        font-weight: bold;
        line-height: 66px;
        // span{
        //   color: #999999;
        //   font-size: 24px;
        //   line-height: 14px;
        // }

        &.order-fail {
          // color: #999999;
        }
        .delay {
          color: #EC5958;
        }
        p.loan-amount-title {
          margin-top: 4px;
          color: #555;
          font-size: 24px;
          font-weight: 400;
          line-height: 28px;
        }
      }
      .content-right {
        font-size: 32px;
        color: #222;
        
        
        .common {
          height: 64px;
          border-radius: 4px;
          line-height: 64px;
          text-align: center;
          background: #EC5958;
          color: #fff;
          padding: 0 48px;
          border-radius: 30px;
        }
        .pend,.late{
          // background: #EC5958;
          // color: #fff;
        }
        // .custom-icon {
        //   display: inline-block;
        //   width: 40px;
        //   height: 40px;
        //   vertical-align: top;
        //   background: url('~@/assets/imgs/icon/icon_right_5.png') no-repeat center;
        //   background-size: cover;
        // }
        .fail {
          color: #FF3743;
          .custom-icon {
            background-image: url('~@/assets/imgs/icon/icon_right_6.png');
          }
        }
      }
    }
    .delay-time {
      margin-top: 8px;
      color: #999999;
      font-size: 24px;
      text-align: right;
    }
  }
}
